<template>
  <f7-block>
    <list :targetUrl="targetUrl">
      <f7-list-item slot="listItem"
                    slot-scope="item"
                    swipeout
                    :key="item.data.id"
                    :title="item.data.name"
                    :header="`ID:${item.data.id}`"
                    :text="item.data.remark">
        <f7-swipeout-actions right>
          <f7-swipeout-button @click="view(item.data)">详情</f7-swipeout-button>
          <f7-swipeout-button color="orange" @click="edit(item.data)">编辑</f7-swipeout-button>
          <f7-swipeout-button color="red" @click="del(item.data)">删除</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
    </list>
    <f7-popup right class="demo-popup" :opened="popupIsOpened"
              @popup:open="popupOpen"
              @popup:closed="handlerPopupClosed">
      <f7-page>
        <f7-navbar title="Popup Title">
          <f7-nav-right>
            <f7-link popup-close>关闭</f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-list no-hairlines-md>
          <f7-list-input
            label="所属应用"
            type="text"
            placeholder="请输入所属应用"
            :clear-button="isEdit"
            :readonly="!isEdit"
            :value="formModel.app"
            @input="formModel.app = $event.target.value"
            input-id="pickerAppDist"
          />
          <f7-list-input
            label="角色名称"
            type="text"
            placeholder="请输入角色名称"
            :clear-button="isEdit"
            :readonly="!isEdit"
            :value="formModel.name"
            @input="formModel.name = $event.target.value"
          />
          <f7-list-input
            label="备注"
            type="textarea"
            placeholder="请输入备注"
            :clear-button="isEdit"
            :readonly="!isEdit"
            :value="formModel.remark"
            @input="formModel.remark = $event.target.value"
          />
        </f7-list>
        <f7-block v-if="isEdit">
          <f7-row>
            <f7-col>
              <f7-button large raised fill color="gray" @click="handlerClickBtnCancel">取消</f7-button>
            </f7-col>
            <f7-col>
              <f7-button large raised fill @click="handlerClickBtnSubmit">提交</f7-button>
            </f7-col>
          </f7-row>
        </f7-block>
        <f7-block v-else>
          <f7-row>
            <f7-col>
              <f7-button large raised fill @click="handlerClickBtnCancel">关闭</f7-button>
            </f7-col>
          </f7-row>
        </f7-block>
      </f7-page>
    </f7-popup>
  </f7-block>
</template>
<script type="text/ecmascript-6">
  import List from '@/components/list'
  import Cache from '@/common/cache'
  import formModel from './model'
  import {rolesURL, appsURL} from '../../config.toml'

  export default {
    name: 'kalix-admin-role',
    data() {
      return {
        targetUrl: rolesURL,
        popupIsOpened: false,
        formModel: new formModel(),
        isEdit: true
      }
    },
    components: {
      List
    },
    methods: {
      view(item) {
        this.popupIsOpened = true
        this.isEdit = false
        this.formModel = new formModel(item.id, item.app, item.name, item.remark, item.createBy, item.creationDate)
        // MyF7.picker()
        // MyF7.toast()
      },
      edit(item) {
        this.popupIsOpened = true
        this.isEdit = true
        this.formModel = new formModel(item.id, item.app, item.name, item.remark, item.createBy, item.creationDate)
        this.getDict('applications').then(data => {
          this.$nextTick(() => {
            console.log('data', data)
            let values = []
            let displayValues = []
            data.forEach(e => {
              values.push(e.id)
              displayValues.push(e.text)
            })
            let pickerDescribe = this.$f7.picker.create({
              inputEl: '#pickerAppDist',
              rotateEffect: true,
              toolbarCloseText: '确定',
              cols: [
                {
                  values,
                  displayValues
                },
              ],
              formatValue: (_values, _displayValues) => {
                this.formModel.app = _displayValues[0]
                return _displayValues[0]
              }
            })
          })
        })
      },
      del() {
        console.log('del')
        this.$f7.dialog.create({
          title: 'title',
          text: 'Are you feel good today?',
          buttons: [
            {
              text: '取消',
              onClick(ev) {
                console.log('Cancel', ev)
              }
            },
            {
              text: '确定',
              onClick(ev) {
                console.log('OK', ev)
              },
            }
          ]
        }).open()
      },
      popupOpen() {
        console.log('popupOpen')
      },
      handlerPopupClosed() {
        this.popupIsOpened = false
        this.formModel = new formModel()
        console.log('popupOpen')
      },
      handlerClickBtnCancel() {
        this.popupIsOpened = false
      },
      handlerClickBtnSubmit() {
        this.axios.request({
          method: this.isEdit ? 'PUT' : 'POST',
          url: this.isEdit ? `${this.targetUrl}/${this.formModel.id}` : this.targetURL,
          data: this.formModel,
          params: {}
        }).then(res => {
          this.popupIsOpened = false
          console.log('res', res)
        })
      },
      getDict(appName) {
        return new Promise((resolve, reject) => {
          this.name = appName
          if (this.name) {
            const DictURL = appsURL
            const DictKey = `${this.name.toUpperCase()}-DICT-KEY`
            let _dict = Cache.get(DictKey)
            if (!_dict) {
              const data = {
                page: 1,
                start: 0,
                limit: 200,
                sort: '[{\'property\': \'value\', \'direction\': \'ASC\'}]'
              }
              this.axios.get(DictURL, {
                params: data
              }).then(response => {
                console.log('response', response)
                if (response.data) {
                  Cache.save(DictKey, JSON.stringify(response.data))
                  resolve(response.data)
                }
              })
            } else {
              resolve(JSON.parse(_dict))
            }
          }
        })
      }
    }
  }
</script>
